<template>
  <el-header class="my-header">
    <el-row>
      <el-col :span="2" :offset="2">
        <router-link to="/" class="me-title">
          <img src="/static/img/logo.png" />
        </router-link>
      </el-col>
      <el-col :span="10" :offset="1" class="blog-write-title">
        <div class="blog-write-title">
          <span>写文章</span>
        </div>
      </el-col>
      <el-col :span="4" :offset="0" class="blog-write-button">
        <div class="blog-write-button">
          <el-button
            @click="publish"
            type="primary"
            size="small"
            round
            plain
            class="write-button"
          >发布</el-button>
          <el-button @click="cancel" type="primary" size="small" round plain class="write-button">取消</el-button>
        </div>
      </el-col>
    </el-row>
  </el-header>
</template>

<script>
export default {
  methods: {
    publish () {
      this.showPublishDialog()
    },
    cancel () {
      this.showCancelDialog()
    }
  },
  props: {
    showPublishDialog: {
      type: Function,
      default () {}
    },
    showCancelDialog: {
      type: Function,
      default () {}
    }
  }
}
</script>

<style>
.my-header {
  line-height: 59px;
  text-align: center;
  background-color: #ffffff;
  position: fixed;
  z-index: 1024;
  min-width: 100%;
  box-shadow: 0 2px 3px hsla(0, 0%, 7%, 0.1), 0 0 0 1px hsla(0, 0%, 7%, 0.1);
}
.me-title img {
  max-height: 60px;
  max-width: 100%;
}
.me-title {
  margin-top: 10px;
}
.blog-write-title {
  font-weight: 600;
  font-size: 20px;
  color: black;
  line-height: 59px;
  text-align: center;
}
.blog-write-button {
  line-height: 59px;
  text-align: center;
}
.write-button{
  padding: 2px 15px!important
}
</style>
